<template>
  <div class="abstract-table-page">
    <abstract-page ref="pager" :fetcher="fetcher" :pagin-position="paginPosition" :use-loading="false">
      <!-- 手机版表格 -->
      <template #phone="{ source }">
        <mu-data-table
          stripe
          :columns="columns"
          :data="source"
          no-data-text="暂无数据"
          :min-col-width="40"
          :loading="loading"
          @row-click="chooseRow"
        >
          <template #default="{ row }">
            <slot :row="row" name="phone">
              <slot :row="row" name="default"></slot>
            </slot>
          </template>
        </mu-data-table>
      </template>
      <!-- 电脑版表格 -->
      <template #pc="{ source }">
        <mu-data-table
          stripe
          :columns="columns"
          :data="source"
          no-data-text="暂无数据"
          :min-col-width="40"
          :loading="loading"
          @row-click="chooseRow"
        >
          <template #default="{ row }">
            <slot :row="row" name="pc">
              <slot :row="row" name="default"></slot>
            </slot>
          </template>
        </mu-data-table>
      </template>
    </abstract-page>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AbstractPage from './AbstractPage'

export default {
  name: 'AbstractTablePage',
  components: {
    AbstractPage
  },
  props: {
    fetcher: {
      type: Function,
      required: true
    },
    phoneColumns: {
      type: Array,
      required: true
    },
    pcColumns: {
      type: Array,
      required: true
    },
    paginPosition: {
      type: String,
      default: 'follow',
      validator(value) {
        return ['follow', 'top', 'bottom', 'both', 'auto'].indexOf(value) >= 0
      }
    }
  },
  computed: {
    ...mapGetters({
      isPhone: 'isPhone',
      types: 'types',
      pagin: 'pagin'
    }),
    columns() {
      return this.isPhone ? this.phoneColumns : this.pcColumns
    },
    showTopPagin() {
      const pagin = (this.paginPosition === 'follow') ? (this.pagin) : (this.paginPosition)
      return (['top', 'both'].indexOf(pagin) >= 0) || (pagin === 'auto' && this.isPhone)
    },
    showBottomPagin() {
      const pagin = (this.paginPosition === 'follow') ? (this.pagin) : (this.paginPosition)
      return (['bottom', 'both'].indexOf(pagin) >= 0) || (pagin === 'auto')
    }
  },
  methods: {
    // 刷新
    refresh() {
      this.$refs.pager.refresh()
    },
    // 选中某一行
    chooseRow(index, row, event) {
      this.$emit('click-row', row)
    }
  }
}
</script>

<style>
.abstract-table-page .field-no-padding {
  padding-left: 0;
  padding-right: 0;
}
.abstract-table-page .field-low-padding {
  padding-left: 8px;
  padding-right: 8px;
}
.abstract-table-page .text-one-line {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
